import React, { useState } from 'react';
import { Card, Input, Button, Row, Col, Table, Tag, Space, Tabs, Avatar, Statistic, Empty, Timeline } from 'antd';
import { SearchOutlined, UserOutlined, FileSearchOutlined, RightOutlined, BarChartOutlined, LineChartOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import './index.less';

const { TabPane } = Tabs;

const Patient360Home: React.FC = () => {
  const navigate = useNavigate();
  const [searchValue, setSearchValue] = useState('');
  
  // 模拟搜索结果数据
  const searchResultsData = [
    {
      key: '1',
      mpiId: 'MPI20230001',
      name: '张三',
      gender: '男',
      age: 45,
      idCard: '110101197508152211',
      phone: '13800138000',
      address: '北京市海淀区中关村大街1号',
      visits: 16,
      lastVisit: '2023-05-10',
    },
    {
      key: '2',
      mpiId: 'MPI20230145',
      name: '张三',
      gender: '男',
      age: 36,
      idCard: '110101198612151234',
      phone: '13911112222',
      address: '北京市朝阳区建国路88号',
      visits: 8,
      lastVisit: '2023-04-22',
    },
    {
      key: '3',
      mpiId: 'MPI20190056',
      name: '张三丰',
      gender: '男',
      age: 62,
      idCard: '110101196105093456',
      phone: '13922223333',
      address: '北京市西城区西长安街1号',
      visits: 24,
      lastVisit: '2023-05-05',
    },
  ];

  // 搜索结果表格列配置
  const searchColumns = [
    {
      title: '主索引号',
      dataIndex: 'mpiId',
      key: 'mpiId',
      width: 120,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      width: 100,
    },
    {
      title: '性别',
      dataIndex: 'gender',
      key: 'gender',
      width: 80,
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
      width: 80,
    },
    {
      title: '身份证号',
      dataIndex: 'idCard',
      key: 'idCard',
      width: 180,
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
      width: 150,
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
      width: 200,
    },
    {
      title: '就诊次数',
      dataIndex: 'visits',
      key: 'visits',
      width: 100,
    },
    {
      title: '最近就诊',
      dataIndex: 'lastVisit',
      key: 'lastVisit',
      width: 120,
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Button 
          type="primary" 
          icon={<FileSearchOutlined />}
          onClick={() => navigate(`/patient360/detail?id=${record.mpiId}`)}
        >
          查看详情
        </Button>
      ),
    },
  ];

  // 模拟热门患者数据
  const hotPatientData = [
    {
      key: '1',
      mpiId: 'MPI20230242',
      name: '李四',
      gender: '男',
      age: 58,
      idCard: '110101196501012233',
      phone: '13866667777',
      visits: 32,
      lastVisit: '2023-05-15',
    },
    {
      key: '2',
      mpiId: 'MPI20210178',
      name: '王五',
      gender: '女',
      age: 42,
      idCard: '110101198012124455',
      phone: '13977778888',
      visits: 28,
      lastVisit: '2023-05-14',
    },
    {
      key: '3',
      mpiId: 'MPI20220365',
      name: '赵六',
      gender: '男',
      age: 64,
      idCard: '110101195905056677',
      phone: '13988889999',
      visits: 25,
      lastVisit: '2023-05-13',
    },
  ];

  // 热门患者表格列配置
  const hotPatientColumns = [
    {
      title: '主索引号',
      dataIndex: 'mpiId',
      key: 'mpiId',
      width: 120,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      width: 100,
    },
    {
      title: '性别/年龄',
      key: 'genderAge',
      width: 100,
      render: (_, record) => (
        <span>{record.gender}/{record.age}岁</span>
      ),
    },
    {
      title: '就诊次数',
      dataIndex: 'visits',
      key: 'visits',
      width: 100,
      sorter: (a, b) => a.visits - b.visits,
      defaultSortOrder: 'descend',
    },
    {
      title: '最近就诊',
      dataIndex: 'lastVisit',
      key: 'lastVisit',
      width: 120,
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Button 
          type="link" 
          icon={<RightOutlined />}
          onClick={() => navigate(`/patient360/detail?id=${record.mpiId}`)}
        >
          查看
        </Button>
      ),
    },
  ];

  // 最近访问患者数据
  const recentPatientData = [
    {
      key: '1',
      mpiId: 'MPI20230001',
      name: '张三',
      gender: '男',
      age: 45,
      visitTime: '2023-05-15 14:30',
      department: '心内科',
    },
    {
      key: '2',
      mpiId: 'MPI20210056',
      name: '李娜',
      gender: '女',
      age: 36,
      visitTime: '2023-05-15 11:20',
      department: '妇科',
    },
    {
      key: '3',
      mpiId: 'MPI20180123',
      name: '王强',
      gender: '男',
      age: 52,
      visitTime: '2023-05-14 16:45',
      department: '骨科',
    },
  ];

  return (
    <div className="patient360-home-container">
      <Row gutter={[16, 16]}>
        <Col span={24}>
          <Card bordered={false} className="search-card">
            <div className="search-box">
              <Input
                size="large"
                placeholder="请输入患者姓名/身份证号/手机号/主索引号"
                prefix={<SearchOutlined />}
                value={searchValue}
                onChange={(e) => setSearchValue(e.target.value)}
                onPressEnter={() => console.log('搜索:', searchValue)}
              />
              <Button 
                type="primary" 
                size="large"
                onClick={() => console.log('搜索:', searchValue)}
              >
                搜索
              </Button>
            </div>
            
            {searchValue && (
              <div className="search-results">
                <Table 
                  columns={searchColumns} 
                  dataSource={searchResultsData}
                  pagination={false}
                  size="middle"
                  scroll={{ x: 1300 }}
                />
              </div>
            )}
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
        <Col span={16}>
          <Card bordered={false} title="最近浏览患者" className="recent-card">
            <div className="recent-list">
              {recentPatientData.map(patient => (
                <div key={patient.key} className="patient-item" onClick={() => navigate(`/patient360/detail?id=${patient.mpiId}`)}>
                  <div className="patient-avatar">
                    <Avatar size={64} icon={<UserOutlined />} />
                  </div>
                  <div className="patient-info">
                    <div className="patient-name">{patient.name}</div>
                    <div className="patient-meta">
                      {patient.gender} | {patient.age}岁 | {patient.department}
                    </div>
                    <div className="patient-time">
                      最近访问: {patient.visitTime}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </Card>
        </Col>
        
        <Col span={8}>
          <Card bordered={false} title="统计信息" className="stats-card">
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <Statistic 
                  title="今日查询" 
                  value={158} 
                  prefix={<BarChartOutlined />} 
                />
              </Col>
              <Col span={12}>
                <Statistic 
                  title="本周查询" 
                  value={1245} 
                  prefix={<LineChartOutlined />} 
                />
              </Col>
            </Row>
            <div className="timeline-container">
              <Timeline mode="left">
                <Timeline.Item label="2023-05-15 14:30">查询患者 张三</Timeline.Item>
                <Timeline.Item label="2023-05-15 11:20">查询患者 李娜</Timeline.Item>
                <Timeline.Item label="2023-05-14 16:45">查询患者 王强</Timeline.Item>
                <Timeline.Item label="2023-05-14 10:15">查询患者 赵明</Timeline.Item>
              </Timeline>
            </div>
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
        <Col span={24}>
          <Card bordered={false} title="患者360" className="hot-card">
            <Table 
              columns={hotPatientColumns} 
              dataSource={hotPatientData}
              pagination={false}
              size="middle"
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Patient360Home; 
